<template>
    <div class="like">
        <div class="top"> </div>
        <p class="pc">猜你喜欢</p>
        <div class="list">
            <div class="item" v-for="(item,index) in list" :key="index">
                <div class="left">
                    <img :src="item.img" alt="">
                </div>
                <div class="right">
                    <div class="ttp">
                        <p class="p1">{{item.shop}}</p>
                        <p class="p2">{{item.commodity}}</p>
                    </div>
                    <p class="p3"><span>{{item.currentPrice}}元</span> 门市价：{{item.counterPrice}}</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    name: '',
    data(){
        return{
            list:[
                {
                    img:"http://p0.meituan.net/dealwatera/1ea3a22d9079abc4314b65f1a8ba407d7926.jpg",
                    shop:"蜜雪冰城",
                    commodity:"[多城市]招牌柠檬水",
                    currentPrice:"3.5",
                    counterPrice:"￥4"
                },
                {
                    img:"http://p0.meituan.net/scpdeal/64efa0d371aecc4ed0121f967dbed04836956.jpg",
                    shop:"味多美蛋糕",
                    commodity:"[多城市]老婆饼（单粒装）",
                    currentPrice:"0.66",
                    counterPrice:"¥2.5"
                },
                {
                    img:"http://p0.meituan.net/deal/07e2777db61cbdef51510db38ef26dbe27030.jpg",
                    shop:"华莱士·全鸡汉堡",
                    commodity:"[多城市]牛气冲天三件套",
                    currentPrice:"13.5",
                    counterPrice:"¥25"
                },
                {
                    img:"http://p1.meituan.net/deal/8d5f77d0b08b88ddfc7f31434e0b9c0c173511.jpg",
                    shop:"茶百道",
                    commodity:"[多城市]爆品-冷萃茶 2 选 1",
                    currentPrice:"6.66",
                    counterPrice:"¥8"
                },
                {
                    img:"http://p0.meituan.net/scpdeal/8c6c9cc6eacfdba00bc05c30a07d35b1135145.jpg",
                    shop:"甜啦啦",
                    commodity:"[多城市]酸奶冰淇淋",
                    currentPrice:"1.23",
                    counterPrice:"¥3"
                },
                {
                    img:"http://p0.meituan.net/deal/8f94b2462c1fc079e6d3452c30467ba524386.jpg",
                    shop:"汉堡王",
                    commodity:"[多城市]【单人餐】狠霸王牛堡+鸡块+小薯+中可_10074_汉堡王",
                    currentPrice:"27.5",
                    counterPrice:"¥55"
                },
                {
                    img:"http://p0.meituan.net/deal/0ddba31139104bc307a3cc9a3e621e3a161472.jpg",
                    shop:"芊丽酒店·爱民厨房",
                    commodity:"[浙商广场]周末特惠儿童自助",
                    currentPrice:"99",
                    counterPrice:"¥149"
                },
                {
                    img:"http://p0.meituan.net/deal/3d3018e90816f862e64993eb1f8cc90554495.jpg",
                    shop:"爱辣屋咕噜鱼",
                    commodity:"[开发区]超值鮰鱼双人餐",
                    currentPrice:"59",
                    counterPrice:"¥79"
                },
                {
                    img:"http://p0.meituan.net/deal/290a02a0435270a2b162a7b192fdb7c2227741.jpg",
                    shop:"蒸蒸日上·肠粉·煲仔饭",
                    commodity:"[万达]鲜虾肠粉",
                    currentPrice:"9.9",
                    counterPrice:"¥12"
                },
                {
                    img:"http://p0.meituan.net/dealwatera/b456f4faec61d43184fc17df3d2791de112242.jpg",
                    shop:"好彩蒸鲜蒸汽海鲜",
                    commodity:"[2店通用]好彩海鲜双人套餐",
                    currentPrice:"218",
                    counterPrice:"¥493"
                },
                {
                    img:"http://p0.meituan.net/deal/c5e509fb0ab2e40f8662b4337b4531a098690.jpg",
                    shop:"小炉子原味小串民间烤骨",
                    commodity:"[步行街]烤脊骨",
                    currentPrice:"19.9",
                    counterPrice:"¥35"
                },
            ]
        };
    },
    components: {

    }
}
</script>

<style lang="scss" scoped>
    .like{
        width: 96%;
        height: 2500px;
        margin: 0 auto;
        .top{
            width: 100%;
            height: 18px;
            background-color: #F6F7FB;
        }
        .pc{
            font-size: 35px;
            font-weight: bolder;
            margin-top: 35px;
        }
        .list{
            
            .item{
                border-top: 2px solid #CECECE;
                margin-top: 15px;
                display: flex;
                .left{
                    width: 200px;
                    height: 200px;
                    margin-right: 15px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    
                    img{
                        width: 270px;
                        height: 175px;
                        overflow: hidden;
                    }
                }
                .right{
                    margin-top: 18px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    .ttp{
                        .p1{
                            font-size: 28px;
                            color: #333333;
                        }
                        .p2{
                            font-size: 24px;
                            color: #666666;
                            width: 500px;
                        }
                    }
                    .p3{
                        font-size: 24px;
                        color: #666666;
                        margin-bottom: 10px;
                        span{
                            font-size: 36px;
                            color: #FF6600;
                        }
                    }
                }
            }
        }
    }
</style>
